<template>
	<!-- 家长端进来看到的是我的几个孩子信息 -->
	<view class="apply">
		<view class='search  acea-row row-between-wrapper bg_color'>
			<view class='input acea-row row-between-wrapper flex1 bg_color'>
				<text class='iconfont icon-sousuo'></text>
				<input class="flex1" placeholder='搜索学员姓名/姓氏' placeholder-class='placeholder' confirm-type='search' type="text"
					v-model='param.keyword' @blur="getArticle" @confirm="getArticle" maxlength="20"></input>
			</view>
			<view class='line_right' v-if="userInfo.roleId == 0" @click="editTo">
				{{isDel? '取消': ' 编辑'}}
			</view>
		</view>
		<scroll-view scroll-y="true" class="scroll_con_fix">
			<view class='nav acea-row row-around' v-if="userInfo.roleId != 0">
				<view class='item' :class='orderStatus==1 ? "on": ""' @click="statusClick(1)">
					<view>待开营</view>
				</view>
				<view class='item' :class='orderStatus==2 ? "on": ""' @click="statusClick(2)">
					<view>开营中</view>
				</view>
				<view class='item' :class='orderStatus==3 ? "on": ""' @click="statusClick(3)">
					<view>已结营</view>
				</view>
			</view>
			<!-- 老师进入后可以看到我负责的学生的信息-->
			<view class="show_center disp flex-col center">
				<view class="full-w disp flex-col center" v-if="stu.length > 0">
					<student class="full-w" :isDel="isDel" v-for="(item,index) in stu" :key="index" :item="item"
						:edit="edit" @edit="emitBack" @checkRow="checkRow" :checkStu="checkStu">
					</student>
				</view>
				<empty-page title="暂无学生记录" v-else></empty-page>
				<view class="btn_grand grand uni-mt-30 btn_pos_next" :class="[checkStu.length <=0 ?'disable':'']"
					v-if="userInfo.roleId == 0 && isDel" @click="removeStuFunc">删除所选</view>
				<view class="btn_grand grand uni-mt-30 btn_pos" v-if="userInfo.roleId == 0" @click="addStu">添加学生 +</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import student from '@/components/student'
	import emptyPage from '@/components/emptyPage'
	import {
		getArticleList
	} from '@/api/api.js'
	import {
		removeStu
	} from '@/api/user.js'
	import {
		mapGetters
	} from "vuex";
	export default {
		components: {
			student,
			emptyPage
		},
		computed: mapGetters(['isLogin', 'userInfo']),
		data() {
			return {
				orderStatus: 1,
				stu: [],
				edit: 0,
				//获取学生信息 
				param: {
					status: 1,
					keyword:''
				},
				isDel: false,
				checkStu: []
			}
		},

		onShow() {
			this.getArticle();
			this.statusClick(1);
		},

		onLoad(op) {
			if (op.edit) {
				this.edit = parseInt(op.edit);
			}
		},

		methods: {
			//删除所选择的学生
			removeStuFunc() {
				if (this.checkStu.length > 0) {
					this.m_show("提交中");
					removeStu(this.checkStu.join(",")).then(res => {
						this.m_hide();
						this.editTo();
						this.checkStu = [];
						this.getArticle();
					})
				}
			},

			checkRow(e) {
				let indexOfs = this.checkStu.indexOf(e)
				if (indexOfs == -1) {
					this.checkStu.push(e);
				} else {
					this.checkStu.splice(indexOfs, 1);
				}
			},


			editTo() {
				this.isDel = !this.isDel;
			},

			getArticle() {
				this.m_show("加载中");
				getArticleList(this.param).then(res => {
					this.stu = res.data;
					this.m_hide();
				})
			},

			statusClick(key) {
				this.orderStatus = key;
				this.param.status = key;
				this.getArticle();
			},

			addStu() {
				uni.navigateTo({
					url: `/pages/students/trainees/index`
				})
			},

			//提交信息返回
			emitBack(item) {
				uni.$emit("chooseUser", item);
				uni.navigateBack({
					delta: 1
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.apply {
		width: 100%;
		height: 100vh;
	}
	.bg_color {
		background-color: #fff;
	}
	.search {
		width: 100%;
		height: 86rpx;
		padding-left: 23rpx;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9;
	}

	.search .input {
		height: 60rpx;
		background-color: #f5f5f5;
		border-radius: 50rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.search .input input {
		width: 548rpx;
		height: 100%;
		font-size: 26rpx;
	}

	.search .input .placeholder {
		color: #999;
	}

	.search .input .iconfont {
		font-size: 35rpx;
		color: #555;
	}

	.line_right {
		text-align: right;
		padding: 18rpx 26rpx;
		border-radius: 0 !important;
	}

	.btn_pos {
		position: absolute;
		bottom: 40rpx;
	}

	.btn_pos_next {
		position: absolute;
		bottom: 145rpx;
	}
	
	.scroll_con_fix {
		position: absolute;
		right: 0;
		left: 0;
		bottom: 0;
		top: 86rpx;
	}
	
	.nav {
		background-color: #fff;
		border-radius: 14rpx;
		margin: 0 auto;
		.item {
			text-align: center;
			font-size: 26rpx;
			color: #282828;
			padding: 26rpx 0;
		}

		.on {
			font-weight: bold;
			position: relative;

			&::after {
				content: '';
				height: 6rpx;
				background-color: #007E51;
				position: absolute;
				bottom: 2rpx;
				left: 0;
				right: 0
			}
		}
	}
</style>